<template>
  <div class="audit-container">
    <el-form ref="auditForm"
             :model="auditForm"
             label-width="180px"
             class="auditForm">
      <el-row>
        <el-col :span="6">
          <el-form-item label="店铺头像">
            <el-image style="width: 80px; height: 80px"
                      :src="auditForm.shop_avater"
                      fit="cover"></el-image>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="店铺实拍">
            <el-image style="width: 80px; height: 80px"
                      :src="auditForm.shop_photo"
                      fit="cover"></el-image>
            <el-image style="width: 80px; height: 80px"
                      :src="auditForm.shop_photo"
                      fit="cover"></el-image>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="主要产品图">
            <el-image style="width: 80px; height: 80px"
                      :src="auditForm.main_product"
                      fit="cover"></el-image>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="营业证件">
            <el-image style="width: 80px; height: 80px"
                      :src="auditForm.shop_license"
                      fit="cover"></el-image>
            <el-image style="width: 80px; height: 80px"
                      :src="auditForm.shop_license"
                      fit="cover"></el-image>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="店铺名称">
        <el-input v-model="auditForm.shop_name"></el-input>
      </el-form-item>
      <el-form-item label="店铺分店名称">
        <el-input v-model="auditForm.shopBranch_name"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="auditForm.idCardNum"></el-input>
      </el-form-item>
      <el-form-item label="身份证照">
        <el-image style="width: 80px; height: 80px"
                  :src="auditForm.idCardFront"
                  fit="cover"></el-image>
        <el-image style="width: 80px; height: 80px"
                  :src="auditForm.idCardContrary"
                  fit="cover"></el-image>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="auditForm.tel_phone"></el-input>
      </el-form-item>
      <el-form-item label="邀请码">
        <el-input v-model="auditForm.invitateID"></el-input>
      </el-form-item>
      <el-form-item label="发货方式"
                    class="deliveryMethod">
        <el-row>
          <el-col>
            <el-radio v-model="auditForm.deliveryMethod"
                      label="0"
                      @change="radioChange"
                      disabled>到店自提</el-radio>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-radio v-model="auditForm.deliveryMethod"
                      label="1"
                      @change="radioChange"
                      disabled>同城配送</el-radio>
          </el-col>
        </el-row>
        <el-row class="deliveryInfo"
                v-show="auditForm.deliveryMethod === 1">
          <el-col :span="3">
            <span>起配价 </span>
            <el-input style="width: 60px"
                      v-model="deliveryInfo.startPrice"></el-input>
            <span> 元</span>
          </el-col>
          <el-col :span="3">
            <span>配送费 </span>
            <el-input style="width: 60px"
                      v-model="deliveryInfo.deliveryPrice"></el-input>
            <span> 元</span>
          </el-col>
          <el-col :span="8">
            <span>配送时间 </span>
            <el-time-picker is-range
                            v-model="valueDate"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="选择时间范围">
            </el-time-picker>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-radio v-model="auditForm.deliveryMethod"
                      label="2"
                      @change="radioChange"
                      disabled>区域配送</el-radio>
          </el-col>
        </el-row>
        <el-row class="deliveryInfo"
                v-show="auditForm.deliveryMethod === 2">
          <el-col :span="3">
            <span>起配价 </span>
            <el-input style="width: 60px"
                      v-model="deliveryInfo.startPrice"></el-input>
            <span> 元</span>
          </el-col>
          <el-col :span="3">
            <span>配送费 </span>
            <el-input style="width: 60px"
                      v-model="deliveryInfo.deliveryPrice"></el-input>
            <span> 元</span>
          </el-col>
          <el-col :span="4">
            <span>配送范围 </span>
            <el-input style="width: 60px"
                      v-model="deliveryInfo.deliveryScope"></el-input>
            <span> 公里(以内)</span>
          </el-col>
          <el-col :span="8">
            <span>配送时间 </span>
            <el-time-picker is-range
                            v-model="valueDate"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="选择时间范围">
            </el-time-picker>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-radio v-model="auditForm.deliveryMethod"
                      label="3"
                      @change="radioChange"
                      disabled>跨域配送</el-radio>
          </el-col>
        </el-row>
        <el-row class="deliveryInfo"
                v-show="auditForm.deliveryMethod === 3">
          <el-col :span="3">
            <span>配送费 </span>
            <el-input style="width: 60px"
                      v-model="deliveryInfo.deliveryPrice"></el-input>
            <span> 元</span>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="审核备注"
                    class="checkRemark">
        <el-input type="textarea"
                  :rows="3"
                  v-model="auditForm.checkRemark"
                  resize="none"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="passCheck">审核通过</el-button>
        <el-button @click="lossCheck">审核不通过</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getItem, setItem } from '@/utils/storage'
export default {
  name: '',
  data () {
    return {
      auditForm: {},
      value1: '',
      storageKey: 'SHOPLIST',
      deliveryInfo: {
        startPrice: 10,
        deliveryPrice: 20,
        deliveryScope: 20
      },
      valueDate: [new Date(2020, 8, 29, 6, 30), new Date(2020, 8, 29, 22, 40)],
      shopList: []
    }
  },
  props: {},
  components: {},
  created () {
    this.cunc()
  },
  mounted () {
  },
  computed: {},
  methods: {
    cunc () {
      this.shopList = getItem(this.storageKey)
      this.auditForm = this.shopList[this.$route.params.index]
      console.log(this.auditForm.deliveryMethod);
    },
    radioChange (label) {
      this.auditForm.deliveryMethod = label
    },
    passCheck () {
      if (this.auditForm.checkStatus) {
        this.auditForm.checkStatus = false
        this.shopList[this.$route.params.index] = this.auditForm
        setItem(this.storageKey, this.shopList)
      }
      this.$router.push('/shopchecked')
    },
    lossCheck () {
      if (!this.auditForm.checkStatus) {
        this.auditForm.checkStatus = true
        this.shopList[this.$route.params.index] = this.auditForm
        setItem(this.storageKey, this.shopList)
      }
      this.$router.push('/shopchecked')
    }
  }
}
</script>
<style scoped lang="less">
.audit-container {
  .auditForm {
    margin-top: 30px;
    .el-form-item {
      width: 500px;
    }
    .el-image {
      margin-right: 15px;
    }
  }
  .checkRemark {
    width: 600px !important;
  }
  .deliveryMethod {
    width: 100% !important;
    .el-row {
      width: 100%;
    }
    .el-col {
      margin-bottom: 15px;
    }
  }
  .deliveryInfo {
    margin-left: 60px;
  }
}
</style>